<template>
  <view class="w-[750rpx] min-h-screen bg-gray-50">
    <!-- Header -->
    <view class="bg-white px-[32rpx] py-[24rpx] shadow-sm flex items-center">
      <IconFont name="left" size="24" class="text-gray-600 mr-[16rpx]" @click="goBack" />
      <text class="text-[32rpx] font-bold text-gray-800">分类二</text>
    </view>

    <!-- Search Bar -->
    <view class="bg-white px-[32rpx] py-[24rpx] border-b border-gray-100">
      <view class="bg-gray-100 rounded-[24rpx] px-[24rpx] py-[16rpx] flex items-center">
        <IconFont name="search" size="20" class="text-gray-400 mr-[16rpx]" />
        <input 
          v-model="searchText"
          placeholder="搜索内容..."
          class="flex-1 text-[28rpx] bg-transparent"
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- Filter Tags -->
    <view class="bg-white px-[32rpx] py-[24rpx] border-b border-gray-100">
      <view class="flex flex-wrap gap-[16rpx]">
        <view 
          v-for="tag in filterTags" 
          :key="tag.id"
          class="px-[24rpx] py-[12rpx] rounded-[20rpx] border"
          :class="selectedTags.includes(tag.id) ? 'bg-blue-500 border-blue-500 text-white' : 'bg-white border-gray-300 text-gray-600'"
          @click="toggleTag(tag.id)"
        >
          <text class="text-[24rpx]">{{ tag.name }}</text>
        </view>
      </view>
    </view>

    <!-- Content List -->
    <view class="p-[32rpx]">
      <view class="space-y-[24rpx]">
        <view 
          v-for="item in filteredItems" 
          :key="item.id"
          class="bg-white rounded-[16rpx] p-[32rpx] shadow-sm"
          @click="handleItemClick(item)"
        >
          <view class="flex">
            <view class="w-[120rpx] h-[120rpx] bg-gray-100 rounded-[12rpx] mr-[24rpx]">
              <image 
                :src="item.image" 
                class="w-full h-full rounded-[12rpx]"
                mode="aspectFill"
              />
            </view>
            <view class="flex-1">
              <text class="text-[32rpx] font-bold text-gray-800 block">{{ item.title }}</text>
              <text class="text-[24rpx] text-gray-500 mt-[8rpx] line-clamp-2">{{ item.description }}</text>
              <view class="flex items-center justify-between mt-[16rpx]">
                <view class="flex items-center">
                  <text class="text-[24rpx] text-blue-500 mr-[16rpx]">{{ item.category }}</text>
                  <text class="text-[24rpx] text-gray-400">{{ item.date }}</text>
                </view>
                <view class="flex items-center">
                  <IconFont name="heart" size="16" class="text-gray-400 mr-[8rpx]" />
                  <text class="text-[24rpx] text-gray-400">{{ item.likes }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Load More -->
      <view class="text-center mt-[48rpx]" v-if="hasMore">
        <view 
          class="inline-block px-[48rpx] py-[24rpx] bg-white rounded-[24rpx] shadow-sm"
          @click="loadMore"
        >
          <text class="text-[28rpx] text-gray-600">加载更多</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

interface FilterTag {
  id: number
  name: string
}

interface ContentItem {
  id: number
  title: string
  description: string
  category: string
  date: string
  likes: number
  image: string
  tags: number[]
}

const searchText = ref('')
const selectedTags = ref<number[]>([])
const hasMore = ref(true)

const filterTags = ref<FilterTag[]>([
  { id: 1, name: '全部' },
  { id: 2, name: '推荐' },
  { id: 3, name: '最新' },
  { id: 4, name: '热门' }
])

const contentItems = ref<ContentItem[]>([
  {
    id: 1,
    title: '内容标题一',
    description: '这是内容的详细描述信息，包含了丰富的文字内容和相关信息',
    category: '分类A',
    date: '2024-01-20',
    likes: 128,
    image: '/src/assets/imgs/none.png',
    tags: [1, 2]
  },
  {
    id: 2,
    title: '内容标题二',
    description: '这是另一个内容的详细描述信息，同样包含了丰富的内容',
    category: '分类B',
    date: '2024-01-19',
    likes: 256,
    image: '/src/assets/imgs/none.png',
    tags: [1, 3]
  },
  {
    id: 3,
    title: '内容标题三',
    description: '第三个内容的详细描述，展示了更多的功能特性',
    category: '分类C',
    date: '2024-01-18',
    likes: 64,
    image: '/src/assets/imgs/none.png',
    tags: [1, 4]
  }
])

const filteredItems = computed(() => {
  let items = contentItems.value

  // Filter by search text
  if (searchText.value) {
    items = items.filter(item => 
      item.title.includes(searchText.value) || 
      item.description.includes(searchText.value)
    )
  }

  // Filter by selected tags
  if (selectedTags.value.length > 0 && !selectedTags.value.includes(1)) {
    items = items.filter(item => 
      item.tags.some(tag => selectedTags.value.includes(tag))
    )
  }

  return items
})

const goBack = () => {
  Taro.navigateBack()
}

const handleSearch = () => {
  Taro.showToast({
    title: '搜索中...',
    icon: 'loading',
    duration: 1000
  })
}

const toggleTag = (tagId: number) => {
  if (tagId === 1) {
    // "全部" tag
    selectedTags.value = selectedTags.value.includes(1) ? [] : [1]
  } else {
    // Remove "全部" if selecting other tags
    if (selectedTags.value.includes(1)) {
      selectedTags.value = selectedTags.value.filter(id => id !== 1)
    }
    
    if (selectedTags.value.includes(tagId)) {
      selectedTags.value = selectedTags.value.filter(id => id !== tagId)
    } else {
      selectedTags.value.push(tagId)
    }
  }
}

const handleItemClick = (item: ContentItem) => {
  Taro.showToast({
    title: `查看${item.title}`,
    icon: 'success',
    duration: 1500
  })
}

const loadMore = () => {
  Taro.showToast({
    title: '加载中...',
    icon: 'loading',
    duration: 1500
  })
  
  setTimeout(() => {
    hasMore.value = false
    Taro.showToast({
      title: '没有更多内容了',
      icon: 'none',
      duration: 1500
    })
  }, 1500)
}
</script>